<template>
    <div class="SCactivity">
        <div class="SCactivityWrap" v-if="!isDataList">
            <div class="SCactivityWrapContent" v-for="item in dataList">
                <img class="SCactivityWrapContentImg" :src="item.imgUrl" alt="">
                <div class="SCactivityWrapContentDiv">
                    <p class="SCactivityWrapContentDivA">
                        <span>{{item.A}}</span>
                        <span>{{item.B}}</span>
                    </p>
                    <p class="SCactivityWrapContentDivB">{{item.C}}</p>
                    <div class="SCactivityWrapContentDivC">
                        <p>{{item.D}}</p>
                        <p>{{item.E}}</p>
                        <p>{{item.F}}</p>
                    </div>
                    <span v-if="true" class="SCactivityWrapContentDivD">立即报名</span>
                    <span v-if="false" class="SCactivityWrapContentDivE">审核中</span>
                </div>
            </div>
            <!--分页器-->
            <div style="padding: 10px 0 20px;">
                <el-pagination
                        id="pagination"
                        style="text-align: right;"
                        background
                        layout="prev, pager, next"
                        :page-size= "4"
                        prev-text="  上一页  "
                        next-text="下一页  "
                        @current-change="handleCurrentChange"
                        :total="25">
                </el-pagination>
            </div>
        </div>

        <!-- 无数据框 -->
        <div class="noDataList" v-if="isDataList">
            <img class="noDataListA" src="./../../assets/img/shopCenter/SCactivityNoDataList.png" alt="">
            <p class="noDataListB">暂无活动</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "allActivity",
        data(){
            return {
                // 没有数据
                isDataList: false,
                dataList:[
                    {
                        "imgUrl":"http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg",
                        "A":"服饰配件",
                        "B":"2019新势力周秋冬",
                        "C":"2019新势力周秋冬活动即将开始！卖家招商现已启动！新势力周直击年轻人的生活方式和喜展现品牌态度和影响力，引领2019秋冬时髦风向标，是一场不可错过的时尚盛宴。请大家务必重视并抓紧时间参与！！！",
                        "D":"报名时间：2019-07-25 14:00:00至2019-08-31 23:59:59",
                        "E":"活动预热时间：2019-08-30 00:00:00 至 2019-08-31 23:59:59\n",
                        "F":"活动时间：2019-09-01 00:00:00至2019-09-03 23:59:59",
                        "G":"立即报名"
                    },
                    {
                        "imgUrl":"http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg",
                        "A":"服饰配件",
                        "B":"2019新势力周秋冬",
                        "C":"2019新势力周秋冬活动即将开始！卖家招商现已启动！新势力周直击年轻人的生活方式和喜展现品牌态度和影响力，引领2019秋冬时髦风向标，是一场不可错过的时尚盛宴。请大家务必重视并抓紧时间参与！！！",
                        "D":"报名时间：2019-07-25 14:00:00至2019-08-31 23:59:59",
                        "E":"活动预热时间：2019-08-30 00:00:00 至 2019-08-31 23:59:59\n",
                        "F":"活动时间：2019-09-01 00:00:00至2019-09-03 23:59:59",
                        "G":"立即报名"
                    },
                    {
                        "imgUrl":"http://img.redocn.com/sheji/20141219/zhongguofengdaodeliyizhanbanzhijing_3744115.jpg",
                        "A":"服饰配件",
                        "B":"2019新势力周秋冬",
                        "C":"2019新势力周秋冬活动即将开始！卖家招商现已启动！新势力周直击年轻人的生活方式和喜展现品牌态度和影响力，引领2019秋冬时髦风向标，是一场不可错过的时尚盛宴。请大家务必重视并抓紧时间参与！！！",
                        "D":"报名时间：2019-07-25 14:00:00至2019-08-31 23:59:59",
                        "E":"活动预热时间：2019-08-30 00:00:00 至 2019-08-31 23:59:59\n",
                        "F":"活动时间：2019-09-01 00:00:00至2019-09-03 23:59:59",
                        "G":"立即报名"
                    }
                ]
            }
        },
        methods: {
            // 分页器选中页数
            handleCurrentChange(val){
                console.log(val);
            }
        },
        mounted(){

        }
    }
</script>

<style scoped>
    .SCactivityWrap{
        background: #FFFFFF;
        padding: 30px 0 0;
    }
    .SCactivityWrapContent{
        margin: 0 30px 30px;
        background: #F5F5F5;
    }
    /* 左侧图片 */
    .SCactivityWrapContentImg{
        width: 290px;
        height: 216px;
    }
    /* 右侧内容 */
    .SCactivityWrapContentDiv{
        float: right;
        width: 660px;
        height: 216px;
        position: relative;
        overflow: hidden;
        overflow-y: auto;
    }
    .SCactivityWrapContentDivA{
        padding: 20px 0 10px 20px;
    }
    .SCactivityWrapContentDivA span:nth-child(1){
        display: inline-block;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        text-align: center;
        font-size:16px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color:rgba(255,255,255,1);
        border-radius: 8px;
        background: #E7261B;
        margin-right: 20px;
    }
    .SCactivityWrapContentDivA span:nth-child(2){
        line-height: 28px;
        font-size:20px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color:rgba(51,51,51,1);
    }
    .SCactivityWrapContentDivB{
        width:622px;
        line-height: 20px;
        font-size:14px;
        font-family:"PingFang-SC-Regular";
        font-weight:400;
        color:rgba(102,102,102,1);
        margin-left: 20px;
    }
    .SCactivityWrapContentDivC{
        height: 66px;
        margin-left: 20px;
        margin-top: 20px;
    }
    .SCactivityWrapContentDivC p{
        font-size:12px;
        font-family:"PingFang-SC-Bold";
        font-weight:600;
        line-height:22px;
        color:#E7261B;
    }
    /* 立即报名按钮 */
    .SCactivityWrapContentDivD{
        position: absolute;
        right: 20px;
        bottom: 20px;
        display: inline-block;
        width:110px;
        height:30px;
        line-height:30px;
        text-align: center;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        font-size:12px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color:rgba(254,254,254,1);
        cursor: pointer;
    }
    /* 审核中按钮 */
    .SCactivityWrapContentDivE{
        position: absolute;
        right: 20px;
        bottom: 20px;
        display: inline-block;
        width:110px;
        height:30px;
        line-height:30px;
        text-align: center;
        background:rgba(204,204,204,1);
        border:1px solid rgba(191,191,191,1);
        border-radius:5px;
        font-size:12px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color:rgba(51,51,51,1);
        cursor: pointer;
    }

    /* 无数据框 */
    .noDataList{
        width:1016px;
        height:809px;
        background:rgba(255,255,255,1);
        text-align: center;
    }
    .noDataListA{
        width: 300px;
        height: 232px;
        margin: 185px auto 0;
    }
    .noDataListB{
        font-size:16px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(0,0,0,1);
        line-height: 50px;
        text-shadow:0px 7px 98px rgba(145,34,0,0.4);
    }
</style>